<template>
  <div class="home">
    <div class="mainTitle">
      <i
        class="iconfont icon-left"
        style="position:absolute;left:10px;top:16px;font-size:14px"
        @click="()=>{$router.go(-1)}"
      ></i>
      <p>云南名族之声</p>
      <img
        class="image"
        src="https://gve.oss-cn-beijing.aliyuncs.com/2020/04/29/1588172988334.png"
        alt
      />
      <van-button class="title_button">报名截止日期：2020.06.12</van-button>
    </div>
    <div class="contentMain">
      <div class="topButton">
        <van-button class="btn" to="/portfolio">当前赛区优秀作品展示</van-button>
      </div>
      <div class="content">
        <van-button class="btn btn1" to="/playerRe">参赛选手报名</van-button>
        <van-button class="btn btn2" to="/judgeRe">赛区评委报名</van-button>
        <van-button class="btn btn3" to="/franchisee">战略伙伴加盟</van-button>
        <van-button class="btn btn4" to="/divisionAnnouncement">赛区公示</van-button>
      </div>
      <div class="aboutUs">
        <van-button class="btn" to="/aboutUs">关于我们</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  mounted() {
    this.$axios.notLoggedIn(`ym/news/singer?id=2`).then(res => {
      console.log(res);
    });
  }
};
</script>
<style lang="scss" scoped>
.home {
  margin: 0;
  padding: 0;
  position: absolute;
  min-height: 100%;
  width: 100%;
  background: #ffcd5b;
  .mainTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 280px;
    width: 100%;
    background-image: url("https://gve.oss-cn-beijing.aliyuncs.com/2020/04/29/1588172822059.png");
    background-repeat: no-repeat;
    background-size: 100%;
    p {
      margin:0;
      padding:10px 0;
      position: absolute;
      top: 0px;
      text-align: center;
      color: #fff;
    }
    .image {
      height: 48px;
    }
    .title_button {
      position: absolute;
      bottom: -20px;
      background: #ed6919;
      color: #fff;
      width: 220px;
      border: none;
      border-radius: 30px;
    }
  }
  .contentMain {
    width: 96%;
    margin: 0 auto;
    margin-top: 26px;
    .topButton {
      .btn {
        background-image: linear-gradient(
          rgba(254, 202, 98),
          rgba(246, 157, 158),
          rgba(242, 133, 250)
        );
        color: #fff;
        border: none;
        width: 100%;
        height: 70px;
        border-radius: 30px 8px 30px 8px;
      }
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      .btn {
        width: 46.5%;
        height: 70px;
        font-size: 16px;
        color: #fff;
        margin: 6px 5px;
        border: none;
        border-radius: 10px;
      }
      .btn1 {
        background-image: linear-gradient(#02c7a7, #24ceb4, #69dbcf);
      }
      .btn2 {
        background-image: linear-gradient(#8d40ff, #cd7ffa);
      }
      .btn3 {
        background-image: linear-gradient(#ff6488, #ffa583);
      }
      .btn4 {
        background-image: linear-gradient(#c39ac7, #90c8fe);
      }
    }
    .aboutUs {
      padding: 10px 8px;
      .btn {
        background-image: linear-gradient(
          #6acbe1,
          #5e96f1,
          #536bfe
        );
        color: #fff;
        border: none;
        width: 100%;
        height: 70px;
        border-radius: 10px;
      }
    }
  }
}
</style>